<template>
  <div class="lotteryDesc hideScrollBar" ref="scrollEl">
    <div class="lotteryDesc-bg"></div>
    <!-- 导航 -->
    <NavBar
      :title="t('inviteFriends.navTitle')"
      isTransparent
      :navScorllOffset="60"
      navScorllColor="#FFF"
      :scrollEl="scrollEl"
      @thresholdChange="(val) => (pageData.isShowAnchor = val)"
      @getNavBarHeight="(h) => (pageData.navBarHeight = h)"
      isCusRightBtns
      isFixed
    />

    <!-- 内容部分 -->
    <div class="content">
      <!-- 定位锚点 tab -->
      <div
        v-if="pageData.isShowAnchor"
        class="anchor items-center scrollable-content"
        style="height: 54px"
        ref="anchorEl"
      >
        <div
          v-for="(item, index) in pageData.refs"
          :key="index"
          class="anchor-item"
          :class="{ 'anchor-activity': pageData.currentIdx === index }"
          :ref="(el) => setRefAction(el, index)"
          @click="anchorJump(index)"
        >
          {{ item.title }}
        </div>
      </div>
      <!-- 正文 -->
      <div style="position: relative; padding-top: 20px">
        <!-- 活动简介 -->
        <div ref="group1"></div>
        <Group
          class="content-group"
          order="1"
          :title="$t('inviteFriends.title1')"
        >
          <div class="items-center group-item" style="margin-top: 20px">
            <img
              class="group-text-icon"
              src="/image/assetDetails/desc-logo.svg"
            />
            <div class="group-text">
              {{ $t("inviteFriends.title1_desc1") }}
            </div>
          </div>
        </Group>
        <!-- 邀请人奖励 -->
        <div ref="group2"></div>
        <Group
          class="content-group"
          order="2"
          :title="$t('inviteFriends.title2')"
        >
          <!-- 正文 -->
          <div class="group-item" style="margin-top: 20px">
            <div class="items-center">
              <img
                class="group-text-icon"
                src="/image/assetDetails/desc-logo.svg"
              />
              <div class="group-text">
                {{ $t("inviteFriends.title2_desc1") }}
              </div>
            </div>
            <!-- 表格 -->
            <div class="table3">
              <div class="table3-item items-center">
                <div class="table3-item-left items-center">
                  <div>
                    {{ $t("inviteFriends.title2_desc1_text1") }}
                  </div>
                </div>
                <div class="table3-item-right">
                  {{ $t("inviteFriends.title2_desc1_text4") }}
                </div>
              </div>
              <div class="table3-item items-center">
                <div class="table3-item-left items-center">
                  <div>
                    {{ $t("inviteFriends.title2_desc1_text2") }}
                  </div>
                </div>
                <div class="table3-item-right">
                  {{ $t("inviteFriends.title2_desc1_text5") }}
                </div>
              </div>
              <div class="table3-item items-center" style="border-bottom: none">
                <div class="table3-item-left items-center">
                  <div>
                    {{ $t("inviteFriends.title2_desc1_text3") }}
                  </div>
                </div>
                <div class="table3-item-right">
                  {{ $t("inviteFriends.title2_desc1_text6") }}
                </div>
              </div>
            </div>
          </div>
          <div class="group-item" style="margin-top: 20px">
            <div class="items-center">
              <img
                class="group-text-icon"
                src="/image/assetDetails/desc-logo.svg"
              />
              <div class="group-text">
                {{ $t("inviteFriends.title2_desc2") }}
              </div>
            </div>
            <!-- 表格 -->
            <div class="table3">
              <div class="table3-item items-center">
                <div class="table3-item-left items-center">
                  <div>
                    {{ $t("inviteFriends.title2_desc2_text1") }}
                  </div>
                </div>
                <div class="table3-item-right">
                  {{ $t("inviteFriends.title2_desc2_text4") }}
                </div>
              </div>
              <div class="table3-item items-center">
                <div class="table3-item-left items-center">
                  <div>{{ $t("inviteFriends.title2_desc2_text2") }}</div>
                </div>
                <div class="table3-item-right">
                  {{ $t("inviteFriends.title2_desc2_text5") }}
                </div>
              </div>
              <div class="table3-item items-center" style="border-bottom: none">
                <div class="table3-item-left items-center">
                  <div>
                    {{ $t("inviteFriends.title2_desc2_text3") }}
                  </div>
                </div>
                <div class="table3-item-right">
                  {{ $t("inviteFriends.title2_desc2_text6") }}
                </div>
              </div>
            </div>
          </div>
          <div class="group-item" style="margin-top: 20px">
            <div class="items-center">
              <img
                class="group-text-icon"
                src="/image/assetDetails/desc-logo.svg"
              />
              <div class="group-text">
                {{ $t("inviteFriends.title2_desc3") }}
              </div>
            </div>
            <!-- 表格 -->
            <div class="table3">
              <div class="table3-item items-center">
                <div class="table3-item-left items-center">
                  <div>
                    {{ $t("inviteFriends.title2_desc3_text1") }}
                  </div>
                </div>
                <div class="table3-item-right">
                  {{ $t("inviteFriends.title2_desc3_text4") }}
                </div>
              </div>
              <div class="table3-item items-center">
                <div class="table3-item-left items-center">
                  <div>
                    {{ $t("inviteFriends.title2_desc3_text2") }}
                  </div>
                </div>
                <div class="table3-item-right">
                  {{ $t("inviteFriends.title2_desc3_text5") }}
                </div>
              </div>
              <div class="table3-item items-center" style="border-bottom: none">
                <div class="table3-item-left items-center">
                  <div>
                    {{ $t("inviteFriends.title2_desc3_text3") }}
                  </div>
                </div>
                <div class="table3-item-right">
                  {{ $t("inviteFriends.title2_desc3_text6") }}
                </div>
              </div>
            </div>
          </div>
          <div class="group-item" style="margin-top: 20px">
            <div class="items-center">
              <img
                class="group-text-icon"
                src="/image/assetDetails/desc-logo.svg"
              />
              <div class="group-text">
                {{ $t("inviteFriends.title2_desc4") }}
              </div>
            </div>
            <!-- 表格 -->
            <div class="table3">
              <div class="table3-item items-center">
                <div class="table3-item-left items-center">
                  {{ $t("inviteFriends.title2_desc4_text1") }}
                </div>
                <div class="table3-item-right">
                  {{ $t("inviteFriends.title2_desc4_text4") }}
                </div>
              </div>
              <div class="table3-item items-center">
                <div class="table3-item-left items-center">
                  {{ $t("inviteFriends.title2_desc4_text2") }}
                </div>
                <div class="table3-item-right">
                  {{ $t("inviteFriends.title2_desc4_text5") }}
                </div>
              </div>
              <div class="table3-item items-center" style="border-bottom: none">
                <div class="table3-item-left items-center">
                  {{ $t("inviteFriends.title2_desc4_text3") }}
                </div>
                <div class="table3-item-right">
                  {{ $t("inviteFriends.title2_desc4_text6") }}
                </div>
              </div>
            </div>
          </div>
          <div class="group-item" style="margin-top: 20px">
            <div class="items-center">
              <img
                class="group-text-icon"
                src="/image/assetDetails/desc-logo.svg"
              />
              <div class="group-text">
                {{ $t("inviteFriends.title2_desc5") }}
              </div>
            </div>
            <!-- 表格 -->
            <div class="table3">
              <div class="table3-item items-center">
                <div class="table3-item-left items-center">
                  {{ $t("inviteFriends.title2_desc5_text1") }}
                </div>
                <div class="table3-item-right">
                  {{ $t("inviteFriends.title2_desc5_text4") }}
                </div>
              </div>
              <div class="table3-item items-center">
                <div class="table3-item-left items-center">
                  {{ $t("inviteFriends.title2_desc5_text2") }}
                </div>
                <div class="table3-item-right">
                  {{ $t("inviteFriends.title2_desc5_text5") }}
                </div>
              </div>
              <div class="table3-item items-center" style="border-bottom: none">
                <div class="table3-item-left items-center">
                  {{ $t("inviteFriends.title2_desc5_text3") }}
                </div>
                <div class="table3-item-right">
                  {{ $t("inviteFriends.title2_desc5_text6") }}
                </div>
              </div>
            </div>
          </div>
          <!-- 举例说明 -->
          <div class="example">
            <span class="example-title">
              {{ $t("inviteFriends.title2_desc6") }}
            </span>
            {{ $t("inviteFriends.title2_desc6_text1") }}
          </div>
        </Group>

        <!-- 好友奖励 -->
        <div ref="group3"></div>
        <Group
          class="content-group"
          order="3"
          :title="$t('inviteFriends.title3')"
        >
          <!-- 正文 -->
          <div class="items-center group-item">
            <img
              class="group-text-icon"
              src="/image/assetDetails/desc-logo.svg"
            />
            <div class="group-text">
              {{ $t("inviteFriends.title3_desc1") }}
            </div>
          </div>
          <!-- 表格 -->
          <div class="table3">
            <div class="table3-item-header table3-item items-center">
              <div>{{ $t("inviteFriends.title3_desc1_text1") }}</div>
              <span>{{ $t("inviteFriends.title3_desc1_text2") }}</span>
            </div>
            <div class="table3-item items-center" style="border-bottom: none">
              <div class="items-center">
                <img
                  class="table3-item-icon"
                  src="/image/inviteFriends/level0.svg"
                />
                <div>{{ $t("inviteFriends.title3_desc1_text3") }}</div>
              </div>
              <span>{{ $t("inviteFriends.title3_desc1_text4") }}</span>
            </div>
            <div class="table3-item items-center" style="border-bottom: none">
              <div class="items-center">
                <img
                  class="table3-item-icon"
                  src="/image/inviteFriends/level1.svg"
                />
                <div>{{ $t("inviteFriends.title3_desc1_text5") }}</div>
              </div>
              <span>{{ $t("inviteFriends.title3_desc1_text6") }}</span>
            </div>
            <div class="table3-item items-center" style="border-bottom: none">
              <div class="items-center">
                <img
                  class="table3-item-icon"
                  src="/image/inviteFriends/level2.svg"
                />
                <div>{{ $t("inviteFriends.title3_desc1_text7") }}</div>
              </div>
              <span>{{ $t("inviteFriends.title3_desc1_text8") }}</span>
            </div>
            <div class="table3-item items-center" style="border-bottom: none">
              <div class="items-center">
                <img
                  class="table3-item-icon"
                  src="/image/inviteFriends/level3.svg"
                />
                <div>{{ $t("inviteFriends.title3_desc1_text9") }}</div>
              </div>
              <span>{{ $t("inviteFriends.title3_desc1_text10") }}</span>
            </div>
          </div>
        </Group>
        <!-- 活动规则 -->
        <div ref="group4"></div>
        <Group
          class="content-group"
          order="4"
          :title="$t('inviteFriends.title4')"
        >
          <!-- 正文 -->
          <div class="items-center group-item" style="margin-top: 20px">
            <img
              class="group-text-icon"
              src="/image/assetDetails/desc-logo.svg"
            />
            <div>
              <div class="group-title">
                {{ $t("inviteFriends.title4_desc1") }}
              </div>
              <div class="group-text">
                {{ $t("inviteFriends.title4_desc1_text1") }}
              </div>
            </div>
          </div>
          <div class="items-center group-item">
            <img
              class="group-text-icon"
              src="/image/assetDetails/desc-logo.svg"
            />
            <div>
              <div class="group-title">
                {{ $t("inviteFriends.title4_desc2") }}
              </div>
              <div class="group-text">
                {{ $t("inviteFriends.title4_desc2_text1") }}
              </div>
            </div>
          </div>
          <div class="items-center group-item">
            <img
              class="group-text-icon"
              src="/image/assetDetails/desc-logo.svg"
            />
            <div>
              <div class="group-title">
                {{ $t("inviteFriends.title4_desc3") }}
              </div>
              <div class="group-text">
                {{ $t("inviteFriends.title4_desc3_text1") }}
              </div>
            </div>
          </div>
          <div class="items-center group-item">
            <img
              class="group-text-icon"
              src="/image/assetDetails/desc-logo.svg"
            />
            <div>
              <div class="group-title">
                {{ $t("inviteFriends.title4_desc4") }}
              </div>
              <div class="group-text">
                {{ $t("inviteFriends.title4_desc4_text1") }}
              </div>
            </div>
          </div>
          <div class="items-center group-item">
            <img
              class="group-text-icon"
              src="/image/assetDetails/desc-logo.svg"
            />
            <div>
              <div class="group-title">
                {{ $t("inviteFriends.title4_desc5") }}
              </div>
              <div class="group-text">
                {{ $t("inviteFriends.title4_desc5_text1") }}
              </div>
            </div>
          </div>
          <div class="items-center group-item">
            <img
              class="group-text-icon"
              src="/image/assetDetails/desc-logo.svg"
            />
            <div>
              <div class="group-title">
                {{ $t("inviteFriends.title4_desc6") }}
              </div>
              <div class="group-text">
                {{ $t("inviteFriends.title4_desc6_text1") }}
              </div>
            </div>
          </div>
          <div class="items-center group-item">
            <img
              class="group-text-icon"
              src="/image/assetDetails/desc-logo.svg"
            />
            <div>
              <div class="group-title">
                {{ $t("inviteFriends.title4_desc7") }}
              </div>
              <div class="group-text">
                {{ $t("inviteFriends.title4_desc7_text1") }}
              </div>
            </div>
          </div>
          <div class="items-center group-item">
            <img
              class="group-text-icon"
              src="/image/assetDetails/desc-logo.svg"
            />
            <div>
              <div class="group-title">
                {{ $t("inviteFriends.title4_desc8") }}
              </div>
              <div class="group-text">
                {{ $t("inviteFriends.title4_desc8_text1") }}
              </div>
            </div>
          </div>
        </Group>
      </div>
    </div>
    <!-- 利用相应式原理，监听多个数值变化 -->
    <div style="position: absolute; bottom: -990px; left: -999px">
      {{ currentIdx }}
    </div>
  </div>
</template>
<script setup name="lotteryDesc">
import { getOssFileUrl } from "@/utils";
import Group from "../../../components/desc/group.vue";
import { useElementBounding } from "@vueuse/core";

// definePageMeta({
//   keepalive: true,
// });

const { t } = useI18n();
const imgUrl = getOssFileUrl({
  headerBg: "/image/mvp/coin/bdc-introduced-bg.png",
  fzjl: "/image/mvp/paper-fzjl.png",
});

// 页面属性
const pageData = reactive({
  isShowAnchor: false,
  navBarHeight: 0,
  currentIdx: -1,
  scrollIng: false,
  refs: [],
  anchorRefs: [],
});

//将循环ref放入到数组中
const setRefAction = (el, item) => {
  pageData.anchorRefs[item] = el;
};

const anchorJump = (idx) => {
  pageData.currentIdx = idx;
  pageData.scrollIng = true;
  let offsetTop = 0;

  if (idx > 0 && pageData.refs[idx].ref.offsetTop) {
    // console.log("--pageData[id]--", pageData.refs[idx].ref);
    offsetTop = pageData.refs[idx].ref.offsetTop - pageData.navBarHeight - 54;
  }
  // console.log(offsetTop, "--id--", idx);
  scrollEl.value.scrollTo({
    top: offsetTop,
    behavior: "smooth",
  });
  setTimeout(() => {
    pageData.scrollIng = false;
  }, 800);
};

const scrollEl = ref();
const anchorEl = ref();
const group1 = ref();
const group2 = ref();
const group3 = ref();
const group4 = ref();

const { y: group1_top } = useElementBounding(group1);
const { y: group2_top } = useElementBounding(group2);
const { y: group3_top } = useElementBounding(group3);
const { y: group4_top } = useElementBounding(group4);

const currentIdx = computed({
  get() {
    if (pageData.scrollIng) return pageData.currentIdx;
    if (group1_top.value < 64 && group1_top.value > 0) {
      pageData.currentIdx = 0;
    } else if (group2_top.value < 64 && group2_top.value > 0) {
      pageData.currentIdx = 1;
    } else if (group3_top.value < 110 && group3_top.value > 0) {
      pageData.currentIdx = 2;
    } else if (group4_top.value < 110 && group4_top.value > 0) {
      pageData.currentIdx = 3;
    }

    return pageData.currentIdx;
  },

  set(val) {
    pageData.currentIdx = val;
  },
});
watch(
  () => pageData.currentIdx,
  (newVal) => {
    if (newVal > -1 && pageData.anchorRefs[pageData.currentIdx] && anchorEl) {
      let offsetTop = pageData.anchorRefs[pageData.currentIdx].offsetLeft;
      anchorEl.value.scrollTo({
        left: offsetTop - 88,
        behavior: "smooth",
      });
    }
  }
);

onMounted(() => {
  pageData.refs = [
    {
      title: t("inviteFriends.title1"),
      ref: group1,
    },
    {
      title: t("inviteFriends.title2"),
      ref: group2,
    },
    {
      title: t("inviteFriends.title3"),
      ref: group3,
    },
    {
      title: t("inviteFriends.title4"),
      ref: group4,
    },
  ];
});
</script>
<style lang="scss" scoped>
.lotteryDesc {
  position: relative;
  background-color: #f0f3fa;
  height: 100vh;
  overflow-y: scroll;
  overflow-x: hidden;
  padding-bottom: var(--safe-area-inset-bottom);

  &-bg {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100vw;
    height: 300 * 2px;
    background: linear-gradient(
      180deg,
      #96c9ff 0.07%,
      rgba(226, 236, 255, 0) 99.93%
    );
  }
}
.anchor {
  position: fixed;
  padding-left: 15 * 2px;
  left: 0;
  background-color: #fff;
  // background: linear-gradient(180deg, #ecf5ff 0%, #f9fcff 100%);
  box-shadow: 0px 2px 8px 0px rgba(21, 81, 145, 0.16);
  z-index: 999;
  width: 100vw;
  overflow-x: scroll;
  overflow-y: hidden;

  &-activity {
    padding: 0 12 * 2px;
    border-radius: 28px;
    background: #e1efff;
    color: #007bff;
  }
  &-item {
    font-weight: 590;
    white-space: nowrap;
    margin-right: 24 * 2px;
    font-size: 13 * 2px;
    height: 26 * 2px;
    line-height: 26 * 2px;
    text-align: center;
  }
}

.content {
  position: relative;
  z-index: 2;
  &-group {
    margin: 0 * 2px 15 * 2px 10 * 2px 15 * 2px;
  }
}

.group {
  &-item {
    margin-top: 12 * 2px;
    align-items: flex-start;
  }
  &-title {
    color: #007bff;
    font-size: 13 * 2px;
    font-weight: 590;
    margin-bottom: 5 * 2px;
  }
  &-text {
    color: #141924;
    font-size: 13 * 2px;
    &-icon {
      width: 9 * 2px;
      height: 9 * 2px;
      margin-top: 3 * 2px;
      margin-right: 9 * 2px;
    }
  }
}

.table3 {
  margin-top: 10 * 2px;
  border-radius: 8 * 2px;
  overflow: hidden;
  &-item {
    height: 40 * 2px;
    padding: 0 10 * 2px;
    justify-content: space-between;
    background-color: #f0f7ff;
    color: #141924;
    font-size: 13 * 2px;
    border-bottom: 0.7px solid rgba(0, 0, 0, 0.1);
    &-left {
      justify-content: center;
      text-align: center;
      color: #141924;
      font-size: 13 * 2px;
      min-width: 50%;
      max-width: 50%;
      border-right: 0.7px solid rgba(0, 0, 0, 0.1);
      height: 100%;
    }
    &-right {
      flex: 1;
      text-align: center;
      color: #007bff;
      font-size: 13 * 2px;
      font-weight: 590;
    }
    &-icon {
      width: 22 * 2px;
      height: 22 * 2px;
      margin-right: 4 * 2px;
    }
    &-header {
      background: linear-gradient(
        90deg,
        #007bff 0.34%,
        #00b2ff 100%
      ) !important;
      color: #fff !important;
      font-size: 13 * 2px;
      font-weight: 510;
    }
  }
}

.example {
  margin-top: 10 * 2px;
  padding: 10 * 2px;
  border-radius: 8 * 2px;
  background: #f6f8fc;
  line-height: 16 * 2px;
  color: #999da7;
  font-size: 12 * 2px;
  &-title {
    color: #007bff;
  }
}

.group4logo {
  width: 100%;
}

.group5 {
  position: relative;
  margin-top: 20 * 2px;
  font-size: 13 * 2px;
  font-weight: 590;
  &-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    justify-content: space-between;
  }
  &-img {
    width: 100%;
  }
}
.group5alert {
  &-img {
    position: absolute;
    left: 28 * 2px;
    bottom: 0px;

    margin-left: 6 * 2px;
    width: 14 * 2px;
    height: 14 * 2px;
  }
  &-alert {
    max-width: 70vw;
    padding: 6 * 2px 12 * 2px;
    color: #fff;
    font-size: 11 * 2px;
  }
}

.group8 {
  // width: 20 * 2px;
  // height: 20 * 2px;
  // line-height: 20 * 2px;
  padding: 3 * 2px 5.4 * 2px;
  text-align: center;
  border-radius: 4 * 2px;
  color: #fff;
  font-size: 13 * 2px;
  font-weight: 590;
  background: linear-gradient(90deg, #007bff 0.34%, #00b2ff 100%);
  margin-right: 5 * 2px;
}

.group9 {
  margin-top: 20 * 2px;
  &-title {
    padding: 2 * 2px 4 * 2px;
    border-radius: 100px;
    border: 2px solid rgba(115, 119, 128, 0.15);
    background: linear-gradient(90deg, #e5f2ff 0%, #e5fbff 100%);
    margin-bottom: 12 * 2px;
    color: #6697cc;
    font-size: 12 * 2px;
  }
  &-text {
    color: #999da7;
    font-size: 12 * 2px;
  }
}
/* 隐藏滚动条 */
.scrollable-content::-webkit-scrollbar {
  width: 0.5em;
  height: 0.5em;
}

.scrollable-content::-webkit-scrollbar-thumb {
  background-color: transparent;
}

.scrollable-content::-webkit-scrollbar-track {
  background-color: transparent;
}
</style>
